<template>
    <div class="pagination-info" v-if="tenantNum > 0">
        <el-pagination
            @current-change="pageChange"
            @size-change="sizeChange"
            :current-page.sync="currentPage"
            :page-sizes="pageSizes"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tenantNum"
            :page-size="pageSize"
            background
        ></el-pagination>
    </div>
</template>

<script>
import { PAGE_SIZES } from '@/const'
export default {
    props:['pageInfo'],
    data() {
        return{
            pageSize: 10,
            tenantNum: 0,
            currentPage:1,
            pageSizes: PAGE_SIZES
        }
    },
    watch:{
        pageInfo:{
            handler(val,oldval){
                this.tenantNum = this.pageInfo.tenantNum;
                this.currentPage = this.pageInfo.currentPage;
            },
            deep:true
        }
    },
    methods:{
        pageChange(val){
            this.$parent.handleCurrentChange(val);
        },
        sizeChange(val){
            this.currentPage = 1;
            this.$parent.handleSizeChange(val);
        }
    }
}
</script>
<style lang="scss" scoped>
.pagination-info{
    padding: 10px 0;
    text-align: center;
}
</style>